<!--
  Generated template for the MilestoneDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>
      {{this.type==1?"新建里程碑":"里程碑详情"}}
    </ion-title>
    <ion-buttons end >
      <button ion-button (click)="onSaveMilestone($event)" style="color: #fc5c53"
            [hidden]="canEdit==false&&canFinish==false&&type==2">
        保存
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content fullscreen>
  <ion-list no-padding no-lines style="margin-bottom: 0px; border-bottom: solid 1px #ececec">
    <ion-item style="height: 50px">
      <ion-icon item-start name="appname-pname"></ion-icon>
      <ion-label style="color: #868686">项目名称:</ion-label>
      <ion-label right text-right>{{this.project.itemName}}</ion-label>
    </ion-item>
  </ion-list>

  <ion-label full style="text-align: center">{{tempMilestone.milestoneName}}</ion-label>

  <ion-list no-lines style="border: solid 1px #ececec">
    <button ion-item style="border-bottom: solid 1px #ececec; height: 50px" (click)="onMilestoneLeader($event)" [disabled]="canEdit==false">
      <ion-icon item-start name="appname-admin"></ion-icon>
      <ion-label item-start [ngStyle]="{'margin-left':this.platform.is('ios')?'0px':'20px'}" style="color: #868686">负责人:</ion-label>
      <ion-label item-end text-right>{{tempMilestone.itemEndLeader}}</ion-label>
    </button>
    <!--<ion-item style="border-bottom: solid 1px #ececec;">-->
      <!--<ion-icon item-start name="appname-admin"></ion-icon>-->
      <!--<ion-label>负责人:</ion-label>-->
      <!--<ion-input text-right type="text" [(ngModel)]="tempMilestone.milestoneLeader" required [disabled]=""></ion-input>-->
    <!--</ion-item>-->
    <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
      <ion-icon item-start name="appname-time"></ion-icon>
      <ion-label style="color: #868686">交付时间:</ion-label>
      <ion-datetime text-right displayFormat="YYYY-MM-DD" max={{maxTime|stampToDate}} min={{minTime|stampToDate}} cancelText="取消" doneText="确认" required [disabled]="canEdit==false"
                    ngModel="{{tempMilestone.deliveryTime | stampToDate}}"
                    (ngModelChange)="tempMilestone.deliveryTime = $event">
      </ion-datetime>
    </ion-item>
    <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
      <ion-icon item-start name="appname-plan"></ion-icon>
      <ion-label style="color: #868686">项目进度</ion-label>
      <ion-select interface="action-sheet" [(ngModel)]="tempMilestone.itemProgress"
                  cancelText="取消" okText="确认" [disabled]="canEdit==false||mileType==2">
        <ion-option value="10%" [disabled]="canChooses[0]==false">10%</ion-option>
        <ion-option value="20%" [disabled]="canChooses[1]==false">20%</ion-option>
        <ion-option value="30%" [disabled]="canChooses[2]==false">30%</ion-option>
        <ion-option value="40%" [disabled]="canChooses[3]==false">40%</ion-option>
        <ion-option value="50%" [disabled]="canChooses[4]==false">50%</ion-option>
        <ion-option value="60%" [disabled]="canChooses[5]==false">60%</ion-option>
        <ion-option value="70%" [disabled]="canChooses[6]==false">70%</ion-option>
        <ion-option value="80%" [disabled]="canChooses[7]==false">80%</ion-option>
        <ion-option value="90%" [disabled]="canChooses[8]==false">90%</ion-option>
        <ion-option value="100%" [disabled]="canChooses[9]==false">100%</ion-option>
      </ion-select>
    </ion-item>
    <ion-item style="border-bottom: solid 1px #ececec;height: 50px">
      <ion-icon item-start name="appname-result"></ion-icon>
      <ion-label no-padding no-margin style="color: #868686">交付成果:</ion-label>
      <ion-input text-right type="text" [(ngModel)]="tempMilestone.deliveryResult" required [disabled]="canEdit==false"></ion-input>
    </ion-item>
    <ion-item *ngIf="tempMilestone.delay > 0" style="border-bottom: solid 1px #ececec; height: 50px" >
      <ion-label style="color: #868686">延迟情况:</ion-label>
      <ion-label text-right item-end></ion-label>
    </ion-item>
  </ion-list>

  <ion-list no-lines no-padding no-margin *ngIf="this.tempMilestone.id.length>0">
    <ion-item style="border-top: solid 1px #ececec;border-bottom: solid 1px #ececec; height: 50px">
      <div item-start>是否完成</div>
      <ion-label style="color: #868686">完成</ion-label>
      <ion-checkbox [(ngModel)]="tempMilestone.itemIsEnd" [disabled]="canFinish==false"></ion-checkbox>
    </ion-item>
    <ion-item style="border-bottom: solid 10px #ececec; height: 50px;" >
      <ion-label item-start style="color: #868686">备注:</ion-label>
      <ion-input item-end no-padding no-margin [(ngModel)]="tempMilestone.remark" [disabled]="canFinish==false"></ion-input>
    </ion-item>
  </ion-list>

  <div *ngFor="let subtask of tempMilestone.children; let i = index">
    <div style="height: 30px; border-bottom: solid 1px #ececec; ">
      <div style="width: 5px; height: 30px; background-color: #555555; float: left;"></div>
      <ion-label no-margin no-padding style="line-height: 30px; margin-left: 10px; float: left;">{{subtask.subtaskName}}</ion-label>
      <div style="float: right; width: 30px; height: 30px;position: relative" >
        <ion-icon name="close" style="position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-right: 10px; "
                  (click)="onRemoveSubtask($event, subtask)" [isActive]="canEdit==true"></ion-icon>
      </div>
    </div>
    <ion-list no-lines no-padding no-margin>
      <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
        <ion-icon item-start name="appname-admin"></ion-icon>
        <ion-label style="color: #868686">负责人:</ion-label>
        <ion-input text-right type="text" [(ngModel)]="subtask.itemEndLeader"
                   required [disabled]="type==2"></ion-input>
      </ion-item>
      <ion-item style="border-bottom: solid 1px #ececec; height: 50px">
        <ion-icon item-start name="appname-time"></ion-icon>
        <ion-label style="color: #868686">交付时间</ion-label>
        <ion-datetime item-end displayFormat="YYYY年MM月DD日" max="2030" min="2015" cancelText="取消" doneText="确认"
                      ngModel="{{subtask.deliveryTime | stampToDate}}"
                      (ngModelChange)="subtask.deliveryTime = $event"
                      [disabled]="type==2"></ion-datetime>
      </ion-item>
      <ion-item style="border-bottom: solid 10px #ececec; height: 50px">
        <ion-icon item-start name="appname-result"></ion-icon>
        <ion-label no-padding no-margin style="color: #868686">交付成果:</ion-label>
        <ion-input text-right type="text" [(ngModel)]="subtask.deliveryResult"
                   required [disabled]="type==2"></ion-input>
      </ion-item>
    </ion-list>
  </div>

  <div style="padding: 10px;" [hidden]="canAddSubtask==false">
    <button ion-button (click)="onAddSubtask($event)" block style="background-color: #fc5c53">+ 添加子任务</button>
  </div>
</ion-content>
